<template>
  <header>animation动画</header>
  <div class="box1">
    我是一个盒子，名称为box1，我会逐渐变透明。
  </div>
  <div class="box2">
    盒子2
  </div>
  <div class="box3-1">
    盒子3-1
  </div>
  <div class="box3-2">
    盒子3-2
  </div>
  <!-- 动画作用的元素，显示为一个旋转并左右移动的圆形 -->
  <div class="box4"></div>
  <!-- 动画作用的元素，显示为一个旋转并左右移动的圆形 -->
  <div class="box5"></div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
let router = useRouter();
function go () {
  router.push({ path: '/car' })
}
</script>

<style scoped>
.box5 {
  width: 100px;
  height: 100px;
  background-image: url("../assets/star.png");
  background-size: cover;
  border-radius: 50%;
  animation-name: box5;
  position: relative;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.box5:hover {
  animation-play-state: paused;
}
@keyframes box5 {
  from {
    left: 0;
    transform: rotate(0deg); /* 开始旋转时角度为0度 */
  }
  to {
    left: calc(100% - 100px);
    transform: rotate(360deg);
  }
}
.box4 {
  width: 100px;
  height: 100px;
  background-image: url("../assets/star.png");
  background-size: cover;        /* 背景图片覆盖整个元素区域 */
  border-radius: 50%;            /* 设置圆形边框，使盒子呈圆形 */
  position: relative;            /* 设置相对定位，以便使用left属性和transform */
  animation-name: box4;          /* 引用定义的关键帧动画名称 */
  animation-duration: 4s;        /* 动画持续时间为4秒 */
  animation-timing-function: linear; /* 动画的时间函数设置为线性，速度恒定 */
  animation-iteration-count: 1; /* 动画无限重复播放 */
  animation-fill-mode: forwards; /* 动画结束时元素保持最终状态 */
}
/* 定义动画关键帧 */
@keyframes box4 {
  from {
    left: 0; /* 动画开始时，元素从容器的最左端开始 */
    transform: rotate(0deg); /* 开始旋转时角度为0度 */
  }
  to {
    left: calc(100% - 100px); /* 动画结束时，元素移动到容器宽度减去元素宽度的位置 */
    transform: rotate(360deg); /* 结束旋转时完成360度旋转 */
  }
}
.box3-1 {
  width: 200px;
  height: 200px;
  background-color: royalblue;
  animation-name: box3-1;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.box3-2 {
  width: 200px;
  height: 200px;
  background-color: royalblue;
  animation-name: box3-1;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}
/* 定义名为box3-1的关键帧动画，控制透明度从全透明到不透明的过渡 */
@keyframes box3-1 {
  0% {
    opacity: 0;           /* 动画开始时，盒子完全透明 */
  }
  100% {
    opacity: 1;           /* 动画结束时，盒子完全不透明 */
  }
}
/* 定义名为box3-2的关键帧动画，控制透明度从全透明到不透明的过渡 */
@keyframes box3-2 {
  0% {
    opacity: 0;           /* 动画开始时，盒子完全透明 */
  }
  100% {
    opacity: 1;           /* 动画结束时，盒子完全不透明 */
  }
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: aqua;
  animation-name: box1;
  animation-duration: 3s;
}

@keyframes box1 {
  0% {
    opacity: 1; /* 动画开始时，盒子完全不透明 */
  }
  100% {
    opacity: 0.3; /* 动画结束时，盒子透明度为0.3 */
  }
}
.box2 {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  background-color: springgreen;
  animation-name: box2;
  animation-duration: 5s;
  animation-timing-function: ease-in;
}
@keyframes box2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;         /* 动画结束时，盒子透明度为0.1 */
  }
}
</style>
